import React, { useRef, useState } from 'react'
import Head from '../component/Head'
import axios from 'axios'
import { Overlay } from 'react-vant';
import {useNavigate} from 'react-router-dom'
export default function Up_phone() {
    // 当前登录的手机号
    const { phone } = JSON.parse(sessionStorage.user)
    const codeRef = useRef(null)
    const codeRef2 = useRef(null)
    const [visible, setVisible] = useState(false);
    // 验证码
    const [value, setvalue] = useState('')

    const navigate=useNavigate()

    // 新的手机号
    const [newphone, setnewphone] = useState('')
    const [value2, setvalue2] = useState('')
    let timer
    const loadCode = async () => {
        let time = 60
        let phone = JSON.parse(sessionStorage.user).phone
        let { data } = await axios.post('http://localhost:3000/loadCode', { phone })
        console.log(data)
        timer = setInterval(() => {
            time--
            codeRef.current.innerHTML = time
            if (time === 0) {
                clearInterval(timer)
                codeRef.current.innerHTML = '重新获取'
            }
        }, 1000)
    }

    const loadCode2 = async () => {
        let time = 60
        let phone = newphone
        let { data } = await axios.post('http://localhost:3000/loadCode', { phone })
        console.log(data)
        timer = setInterval(() => {
            time--
            codeRef2.current.innerHTML = time
            if (time === 0) {
                clearInterval(timer)
                codeRef2.current.innerHTML = '重新获取'
            }
        }, 1000)
    }

    // 验证码验证
    const test = async () => {
        if (value.length === 0) {
            alert('请输入验证码')
            return
        }
        let yzm = value
        let { data } = await axios.post('http://localhost:3000/test', { yzm })
        console.log(data);
        if (data.code === 200) {
            setVisible(true)
        } else {
            alert('验证码错误')
        }
    }

    const test2 = async () => {
        if (value2.length === 0) {
            alert('请输入验证码')
            return
        }
        let yzm = value2
        let { data } = await axios.post('http://localhost:3000/test', { yzm })
        console.log(data)
        if(data.code===200){
            update()
        }else{
            alert('验证码错误')
        }
    }
    const update = async () => {
        let { _id } = JSON.parse(sessionStorage.user)
        let { data } = await axios.get('http://localhost:3000/updatephone', {
            params: {
                id: _id,
                phone: newphone
            }
        })
        console.log(data)
        if(data.code===200){
            navigate('/app/setting/secure')
        }
    }
    return (
        <div>
            <Head titleName='更换手机号码'></Head>

            <div>
                <div style={{ textAlign: 'center', marginTop: '80px', fontSize: '20px' }}>您正在更换的手机号为{phone.substring(0, 3) + '****' + phone.substring(7)}</div>
                <div style={{ padding: '40px 20px', height: '50px' }}>
                    <div style={{ width: '100%', borderBottom: '2px solid #F2F2F2', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <input onChange={(e) => { setvalue(e.target.value) }} value={value} style={{ width: '60%', height: '50px', border: 'none' }} placeholder='请输入短信验证码' type="text" />
                        <div onClick={() => { loadCode() }} ref={codeRef} style={{ color: '#3E7CFC', fontSize: '14px' }}>获取验证码</div>
                    </div>
                </div>
                <div style={{ padding: '0px 60px' }}>
                    <div onClick={() => { test() }} style={{ width: '100%', height: '50px', backgroundColor: value.length > 0 ? '#3E7CFC' : '#C7C9FC', textAlign: 'center', lineHeight: '50px', color: 'white', fontSize: '18px' }}>
                        下一步
                    </div>
                </div>
            </div>
            <Overlay visible={visible} onClick={() => setVisible(false)}
                style={{
                    height: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}>
                <div style={{ width: '100%', height: '100%', backgroundColor: '#fff', borderRadius: 4 }} >
                    {/* 修改手机号 */}
                    <Head titleName='更换手机号码'></Head>
                    <div style={{ marginTop: '20px' }}>
                        <div style={{ padding: '0px 20px', height: '60px' }}>
                            <div style={{ width: '100%', borderBottom: '2px solid #F2F2F2', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <input onChange={(e) => { setnewphone(e.target.value) }} value={newphone} style={{ width: '60%', height: '50px', border: 'none' }} placeholder='请输入新的手机号码' type="text" />
                            </div>
                        </div>
                        <div style={{ padding: '0px 20px', height: '60px' }}>
                            <div style={{ width: '100%', borderBottom: '2px solid #F2F2F2', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <input onChange={(e) => { setvalue2(e.target.value) }} value={value2} style={{ width: '60%', height: '50px', border: 'none' }} placeholder='请输入短信验证码' type="text" />
                                <div onClick={() => { loadCode2() }} ref={codeRef2} style={{ color: '#3E7CFC', fontSize: '14px' }}>获取验证码</div>
                            </div>
                        </div>
                        <div style={{ padding: '0px 60px' }}>
                            <div onClick={() => { test2() }} style={{ width: '100%', height: '50px', backgroundColor: value2.length > 0 ? '#3E7CFC' : '#C7C9FC', textAlign: 'center', lineHeight: '50px', color: 'white', fontSize: '18px', marginTop: '20px' }}>
                                确认修改
                            </div>
                        </div>
                    </div>
                </div>
            </Overlay>

        </div>
    )
}
